<template>
  <div id="cycle">1</div>
  <span class="color">选择数据&nbsp;------</span>
  <div id="cycle1">2</div>
  <span class="color">上传</span>
  <br><br>
  <sapn class="f">数据预览</sapn>
  <span class="color">预览4条样本数据</span>
  <br><br>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in list" :key="index">
        <td v-for="(value, key) in item" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
 
  <sapn class="f">导入设置</sapn>
  <br><br>
  <span class="color f1">异常行处理</span>
  <select v-model="selected1">
    <option>空置填充</option>
    <option>放弃异常行处理</option>

  </select>
  <br><br>
</template>



<script>
import { ref } from 'vue'
export default {
  name: 'TableDate',
  setup() {
    const headers = ref(['序号', '字段', '样例1', '样例2', '样例3', '样例4', '样例5', '样例6'])// 列索引 
    const list = ref([['0', 'n', 25, 25, 25, 25, 25, 25], ['1', 'n1', 25, 25, 25, 25, 2, 25], ['2', 'n2', 29, 25, 25, 25, 25, 25], ['3', 'n3', 24, 26, 27, 29, 25, 25]]) // 数据列表 
    const selected1 = ref("空置填充")
    return { headers, list, selected1 }

  },

};
</script>

<style scoped>
th {
  background-color: #f0f0f0;
  color: #333;
  font-weight: bold;
  padding: 12px 20px;
}

/* 表格行样式和鼠标悬停效果 */
tbody tr {
  transition: background-color 0.3s ease;
}

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e6f7ff;
}

td {
  padding: 10px 20px;
  border-bottom: 1px solid #e8e8e8;
}


table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}


td {
  text-align: center;
  margin: 0 20px;
}

.color {
  color: darkcyan;
}

.f {
  font-weight: bolder;
  margin: 0 10px 0 30px;
}

.f1 {
  margin: 0 15px 0 50px;
}

#cycle {
  display: inline-block;
  width: 15px;
  height: 15px;

  border: 1px solid darkgrey;
  border-radius: 50%;
  background-color: darkgrey;
  font-size: small;
  line-height: 15px;
  text-align: center;
  color: aliceblue;
  margin: 10px 5px 0 30px;
}

#cycle1 {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid rgb(43, 192, 226);
  border-radius: 50%;
  background-color: rgb(43, 192, 226);
  font-size: small;
  line-height: 15px;
  text-align: center;
  color: aliceblue;
  margin: 0 5px 0 5px;
}
</style>
